<template>
	<s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/lifecircle" title="当前位置">
		<view class="container">
			<!-- 搜索输入框 -->
			<view class="search-bar">
				<uni-search-bar class="search-input" @confirm="search" :focus="true" v-model="inputValue"
					@input="handleSearch" @cancel="cancel" @clear="clear" placeholder="请输入">
				</uni-search-bar>

			</view>
			<view class="positioning">
				<text>{{address}}</text>
				<view class="location-btn" @click="getLocate(2)">
					<image class="location-icon" src="/static/images/positioning-icon.png" mode="widthFix" />
					重新定位
				</view>
			</view>
			<!-- 地址列表 -->
			<view class="near">
				<image class="near-icon" src="/static/lifecircle/locate-icon.png" mode="widthFix" />
				附近地址
			</view>
			<view class="address-list">
				<uni-list>
					<uni-list-item v-for="(item, index) in addressList" :key="index" title="" :note="item.address"
						clickable @click="selectAddress(item)"></uni-list-item>
				</uni-list>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import amap from '@/libs/amap-uni.js';

	const address = ref('')
	const inputValue = ref('')
	const addressListOld = ref([])
	const addressList = ref([])
	const myAmapFun = new amap.AMapWX({
		key: '8c18837a8374f36e36d2d2884e9897b9'
	});

	const selectAddress = (item) => {
		sheep.$router.go('/pages/index/lifecircle', {
			address: item.address,
			longitude: item.location?.split(',')?.[0],
			latitude: item.location?.split(',')?.[1]
		});
	}

	const handleSearch = (val) => {
		addressList.value = addressListOld.value.filter(item => {
			return item.address.includes(val);
		});
	};

	// 获取位置
	const getLocate = (type) => {
		uni.getLocation({
			type: 'wgs84',
			isHighAccuracy: true,
			success: function(res) {
				if (type == 2) {
					getAroundPOI(res)
				}
				myAmapFun.getRegeo({
					location: res.longitude + ',' + res.latitude,
					success: res => {
						if (res?.[0]?.name) {
							address.value = res?.[0]?.name
						}
						if (type !== 1) {
							selectAddress({
								address: address.value,
								location: res.longitude + ',' + res.latitude
							})
						}
					},
					fail: function(error) {
						console.log('高德地图受限')
					}
				})

			}
		});
	}

	// 获取周边的小区
	const getAroundPOI = (res) => {
		const url =
			`https://restapi.amap.com/v3/place/around?key=5a6cc005f7f1da52a4e034e7d8aaf940&location=${res.longitude},${res.latitude}&radius=2000&output=json`

		uni.request({
			url,
			method: 'GET',
			success: (res) => {
				if (res.data.pois && res.data.pois.length > 0) {
					addressListOld.value = addressList.value = res.data.pois.map(item => ({
						name: item.name,
						address: item.address,
						location: item.location
					}))
				}
			},
			fail: (err) => {
				console.error('获取POI失败:', err)
			}
		})
	}

	onLoad(async (val) => {
		if (val.address) {
			address.value = val.address
			getAroundPOI(val)
		} else {
			getLocate(1)
		}
	});
</script>

<style scoped lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-bar {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.search-input {
		width: 100%;
	}


	.address-list {
		padding: 20rpx;
	}

	.uni-item__content {
		padding: 30rpx !important;
		background-color: #fff !important;
		margin-bottom: 20rpx !important;
		border-radius: 16rpx !important;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1) !important;
	}

	.positioning {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1) !important;

		.location-btn {
			display: flex;
			align-items: center;

			.location-icon {
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.near {
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx 0;

		.near-icon {
			margin-right: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>